<template>
  <div class="dashboard-container">
    <div class="dashboard-text">当前文库所有者: {{ nickName }}</div>
    <!-- <el-row :gutter="20">
      <el-col>
        <div>
          <div></div>
          <div></div>
        </div>
      </el-col>
      <el-col></el-col>
      <el-col></el-col>
      <el-col></el-col>
    </el-row> -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content db views">
        <el-container>
          <el-aside>
            <div class="logo-views"></div>
          </el-aside>
          <el-container>
            <el-main>{{num_views}}</el-main>
            <el-footer>访问量</el-footer>
          </el-container>
        </el-container>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple db content">
        <el-container>
          <el-aside>
            <div class="logo-content"></div>
          </el-aside>
          <el-container>
            <el-main>{{num_content}}</el-main>
            <el-footer>已写文库</el-footer>
          </el-container>
        </el-container>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple db note">
        <el-container>
          <el-aside>
            <div class="logo-note"></div>
          </el-aside>
          <el-container>
            <el-main>{{num_note}}</el-main>
            <el-footer>笔记</el-footer>
          </el-container>
        </el-container>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple db rate">
        <el-container>
          <el-aside>
            <div class="logo-rate"></div>
          </el-aside>
          <el-container>
            <el-main>{{num_rate}}</el-main>
            <el-footer>频率</el-footer>
          </el-container>
        </el-container>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" v-for="(item,index) in contentList" :key="index">
        <div class="grid-content bg-purple content-body">
          <!-- <a @mouseenter="enter" @mouseleave="leave"> -->
          <el-container
            direction="horizontal">
            <div class="pre-icon"></div>
            <div class="content-title">{{item.fileTitle}}</div>
            <div class="content-type" :style="{'color':item.fileType == 1 ? 'rgb(103, 214, 112)':'rgb(223, 108, 108)'}">{{item.fileType == 1 ? '正常':'异常'}}</div>
            <div class="content-time">{{item.uploadTime}}</div>
          </el-container>
          <div class="tableTitle"><span class="midText"></span></div>
          <!-- </a> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getContentList } from '@/api/content'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'nickName',
      'token'
    ])
  },
  created() {
    console.log(this.nickName, this.token)
    this.fetchContent(this.token)
    this.checkNickName()
  },
  data() {
    return {
      views: '../../assets/icon/浏览.svg',
      content: '../../assets/icon/内容.svg',
      note: '../../assets/icon/笔记.svg',
      rate: '../../assets/icon/频率.svg',
      num_views: '6',
      num_content: '5',
      num_note: '0',
      num_rate: '0',
      contentList: []
    }
  },
  methods: {
    fetchContent(param) {
      getContentList(param).then(response => {
        console.log(response)
        console.log(response.data)
        this.contentList = response.data
      })
    },
    checkNickName() {
      if (this.nickName !== 'robin') {
        this.num_views = '0'
        this.num_content = '0'
      }
    },
    // enter(e) {
    //   e.style.background = '#99a9bf'
    //   console.log(e)
    // }
  }
}
</script>

<style lang="scss" scoped>
.element.style {
    width: 0px !important;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .db{
    border-radius: 4px;
    min-height: 100px;
  }
  .row-bg {
    padding: 0px 0;
    background-color: #f9fafc;
  }
  .logo-views {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    background-image: url('../../assets/icon/浏览.png');
    width: 60px;
    height: 60px;
    line-height: 0px;
    margin-top: 50%;
    margin-left: 40%;
    font-size: 24px;
    background-repeat:no-repeat;
}
  .logo-content {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    background-image: url('../../assets/icon/内容.png');
    width: 60px;
    height: 60px;
    line-height: 0px;
    margin-top: 45%;
    margin-left: 40%;
    font-size: 14px;
    background-repeat:no-repeat;
}
  .logo-note {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    background-image: url('../../assets/icon/笔记.png');
    width: 60px;
    height: 60px;
    line-height: 0px;
    margin-top: 50%;
    margin-left: 40%;
    font-size: 14px;
    background-repeat:no-repeat;
}
  .logo-rate {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    background-image: url('../../assets/icon/频率.png');
    width: 60px;
    height: 60px;
    line-height: 0px;
    margin-top: 45%;
    margin-left: 40%;
    font-size: 14px;
    background-repeat:no-repeat;
}
.el-container {
  border-radius: 4px;
}
  .el-footer {
    // background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
  }
  .el-aside {
    // background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 80px;
    width: 100px !important;
  }
  .el-main {
    // background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 60px;
    font-size: 36px;
    font-weight: 900;
  }
.views{
  background-color: rgb(147, 224, 255);
}
.content{
  background-color: rgb(225, 233, 220);
}
.note{
  background-color: rgb(203, 203, 203);
}
.rate{
  background-color: rgb(255, 120, 128);
}
.content-body{
  text-align: center;
  line-height: 40px;
  margin-bottom: 5px;
}
.pre-icon{
  width: 10%;
  background-image: url('../../assets/icon/文档.png');
  background-repeat: no-repeat;
  text-align: center;
}
.content-title{
  color:rgb(0, 0, 0);
  width: 30%;
}
.content-type{
  color:#f9fafc;
  width: 30%;
}
.content-time{
  color:dimgrey;
  width: 30%;
}
.tableTitle {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background-color: #d4d4d4;
    text-align: center;
    font-size: 16px;
    color: rgba(101, 101, 101, 1);
  }
 .midText {
    position: absolute;
    // left: 50%;
    background-color: #ffffff;
    padding: 0 15px;
    transform: translateX(-50%) translateY(-50%);
  }
</style>
